<template>
	<div class="page">
		<div class="page-header">
			<img v-if="bannerImage" class="page-header__banner" :src="bannerImage" alt="banner">
			<img v-else class="page-header__banner" src="~@/assets/images/speciality-header.png" alt="banner">
			<div class="page-header__bd">
				<h1 class="page-name">{{ $route.meta.title }}</h1>
				<div class="page-search">
					<el-autocomplete class="page-searchInput" v-model.trim="search" :fetch-suggestions="querySearch"
						@select="onSelectAutocomplete" 
						placeholder="请输入专业名称" :trigger-on-focus="false">
					</el-autocomplete>
					<el-button class="page-searchButton" @click="submit()">查询</el-button>
				</div>
			</div>
		</div>
		<div class="page-bd">
			<div class="">
				<el-row style="margin-bottom: 43px;" type="flex">
					<el-radio-group class="modify-radioGroup" v-model="catType" @change="onChangeCatType" style="flex-shrink: 0; margin-right: 30px;">
						<el-radio-button :label="1">普通本科</el-radio-button>
						<el-radio-button :label="2">职业本科</el-radio-button>
						<el-radio-button :label="3">高职专科</el-radio-button>
					</el-radio-group>
					<el-tabs class="ui-tabs" v-model="tabs.active" @tab-click="tabClick" style="flex: 1; min-width: 0;">
						<el-tab-pane v-for="item in tabs.list" :key="item.id" :label="item.name" :name="item.id + ''">
						</el-tab-pane>
					</el-tabs>
				</el-row>

				<!-- <div v-if="getMajorTitle">
					<div class="ui-title">
						<div class="ui-title__icon"></div>
						<div class="ui-title__name">{{ getMajorTitle }}</div>
					</div>
				</div> -->
				<div v-loading="tabs.subMajorLoading" class="">
					<el-empty v-show="!tabs.subMajor || tabs.subMajor.length === 0" :description="tabs.subMajorLoading ? '加载中...' : '暂无数据'"></el-empty>
					<div class="majorItem" v-for="item in tabs.subMajor" :key="item.id">
						<div v-html="showDate(item.name)" class="majorItem-label"></div>
						<div class="majorItem-value"> 
							<div class="majorItem-value__span5" v-for="(child, childIndex) in item.childData" :key="child.id">
								<div @click="goDetails(child, item)" v-html="showDate(child.name)" class="ui-link" :style="childIndex > 4 && 'margin-top: 22px; '">
								
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { request } from "@/util/request.js"
export default {
	data() {
		return {
			bannerImage: null,
			catType: 1, // 类型1：普通本科 2：职业本科 3：高职专科
			tabs: {
				list: [],
				active: null,
				subMajor: null,
				subMajorLoading: false,
			},
			majors: [],
			searchhead: 0,
			search: null,
		}
	},
	computed: {
		getMajorTitle() {
			let subMajor = this.tabs.list.find(item => item.id + '' === this.tabs.active)
			if (!subMajor) {
				return ''
			}
			return subMajor.name || ''
		}
	},
	created() {
		this.getBanner()
		this.getMajorLevel1()
	},
	mounted() {},
	methods: {
		onSelectAutocomplete(item) {
			this.tabs.active = item.rootId + ''
			this.tabClick()
		},	
		getBanner() {
			this.$api.queryBanner({ type: this.$constants.bannerTypes.speciality }).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				if (res.data[0]) {
					this.bannerImage = res.data[0].image
				}
			})
		},
		getMajorLevel1() {
			this.getMajorData({
				level: 1,
				pageNum: 1,
				pageSize: 999999,
				catType: this.catType,
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.message)
				}
				this.tabs.list = res.data || []
				this.getAllMajor()
				if (this.tabs.list.length > 0) {
					this.tabs.active = res.data[0].id + ''
					this.getMajorChildren()
				}
			})
		},

		onChangeCatType() {
			this.getMajorLevel1()
		},
		getMajorChildren() {
			this.tabs.subMajorLoading = true
			this.tabs.subMajor = null
			this.getMajorData({
				pageNum: 1,
				pageSize: 999999,
				parentId: this.tabs.active,
				catType: this.catType,
			})
				.finally(() => this.tabs.subMajorLoading = false)
				.then(res => {
					if (![0, 200].includes(res.code)) {
						return this.$message.error(res.message)
					}
					this.tabs.subMajor = res.data
					if (this.search) {
						this.$nextTick(() => {
							this.submit()
						})
					}
				})
		},
		// 用于全局搜索
		getAllMajor() {
			this.getMajorData({
				// level: 1,
				pageNum: 1,
				pageSize: 999999,
				catType: this.catType,
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.message)
				}
				console.log('getAllMajor', res);
				function flatten(arr) {
					return arr.reduce((result, item) => {
						return result.concat(item, Array.isArray(item.childData) ? flatten(item.childData) : [])
					}, [])
				}

				let allMajors = res.data
					.filter(item => item.level === 2)
					.map(item => {
						item.childData.forEach(child => {
							child.rootId = item.parentId
						})
						return item
					})
				this.majors = flatten(allMajors).filter(item => item.level === 3)
				this.majors = this.majors.map(item => {
					item.value = item.name
					return item
				})
			})
		},
		tabClick() {
			this.getMajorChildren()
		},

		goDetails(row) {
			const infos = row;
			if (this.catType !== 1) {
				return
			}
			localStorage.setItem('infos', JSON.stringify(infos))
			const routeData = this.$router.resolve({
				path: '/speciality/majorsDetail',
				query: {
					name: row.name
				}
			})
			window.open(routeData.href, '_blank')
		},
		submit() {
			let num = document.getElementsByTagName("font").length;    //获取所有font标签的数量，这个页面所有的font标签都是由查询替换获得的，所以font标签的数量可以当场查询到关键词的数量
			if (num != 0) {  //如果查询关键词存在，跳到第一个关键词的位置，标头增1，走满一圈归0
				document.getElementsByTagName("font")[this.searchhead].scrollIntoView({ block: "center" }); //scrollIntoView方法只在原生document中可以使用，jquery中没有这个方法，参数默认是true，将这个元素置于页面第一行（如果页面可以滑动函数才生效）
				if (this.searchhead < (num - 1)) {
					this.searchhead += 1;
				} else if (this.searchhead == (num - 1)) {
					this.searchhead = 0;
				}
			}
		},
		showDate(val) {
			val = val + '';
			if (val.indexOf(this.search) !== -1 && this.search !== '') {
				return val.replace(this.search, '<font color="#1264ff">' + this.search + '</font>')
			} else {
				return val
			}
		},

		getMajorData(params) {
			return request({
				method: 'get',
				url: 'majorCategoryInfo/getMajor',
				params
			})
		},

		createFilter(queryString) {
			return (restaurant) => {
				return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
			};
		},
		querySearch(queryString, cb) {
			var restaurants = this.majors
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
			// 调用 callback 返回建议列表的数据
			cb(results);
		},

	},

}
</script>

<style lang="stylus" scoped>
.page 
	font-size: 15px;
	background: #F9F9F9;
	&-bd 
		width BodyMaxWidth
		margin 10px auto 60px auto
		uiBlock();
		padding 32px 22px 39px 22px
		box-sizing border-box
.page-header
	width: 100%;
	height: 260px;
	position relative
	&__banner
		width 100%
		height 100%
		object-fit: cover;
		position absolute
		top 0
		left 0
	&__bd 
		text-align center
		padding 52px 0 0 0
		position relative
		z-index 1
		width BodyMaxWidth
		margin 0 auto
		box-sizing border-box
.page-name 
	margin 0 0 38px 0
	font-size: 50px;
	font-weight: normal;
	color: #fff;
	line-height: 48px;
	text-shadow: 0px 4px 4px rgba(121, 68, 2, 0.1);
.page-search
	searchHeight = 50px
	&Input 
		width 558px
	/deep/
		.el-input__inner
			height: searchHeight;
			line-height: searchHeight;
			border-radius: 6px 0 0 6px;
			border: none
			font-size: 16px;
			color: #999999;
		.el-button
			height: searchHeight;
			line-height: searchHeight;
			padding 0 44px
			border-radius: 0 6px 6px 0;
			border: none
			background: PrimaryColor;
			font-size: 16px;
			color: #fff;

.ui-tabs /deep/ .el-tabs__item, .modify-radioGroup /deep/ .el-radio-button__inner
	font-size: 15px;
	font-weight 600

.majorItem 
	display flex
	padding 22px 0 22px 45px
	line-height: 16px;
	font-size: 16px;
	font-weight: PingFangMedium500;
	color: #333333;
	&:nth-child(odd) 
		background: #F9F9F9; 
	&-label 
		flex-shrink 0
		font-size: 16px;
		font-weight: 600;
		color: #333333;
		min-width 263px
		padding-right 10px
		box-sizing border-box
	&-value 
		flex 1
		display flex
		flex-wrap wrap
		font-size 15px
		&__span5 
			// width 20%
			flex 0 0 20%

#search {
	margin-left: 80px;
	margin-top: 20px;
	margin-bottom: 10px;
}

#search .el-input--mini .el-input__inner {
	height: 40px;
}

#search [class*=el-col-] {
	float: none;
}

font {
	padding-top: 260px;
	margin-top: -160px;
}
</style>
